<template>
 	<div> 
 		<a-spin   :indicator="indicator"  tip="正在加载中..."  :spinning='spinning'  :delay="delayTime">
	 		<a-form :layout="formLayout"  :form="form" > 
				<a-form-item
					label="项目名称"
					:label-col="formItemLayout.labelCol"
					:wrapper-col="formItemLayout.wrapperCol"
					> 
					{{formData.name}}
				</a-form-item> 

				<a-form-item   
					label="项目负责人"
					:label-col="formItemLayout.labelCol"
					:wrapper-col="formItemLayout.wrapperCol"
				>
					{{formData.principalName}}
				</a-form-item>
			      
				<a-form-item
					label="买家公司"
					:label-col="formItemLayout.labelCol"
					:wrapper-col="formItemLayout.wrapperCol"  
				>	
					{{formData.buyerName}}
				</a-form-item>
				<a-form-item
					label="供应商公司"
					:label-col="formItemLayout.labelCol"
					:wrapper-col="formItemLayout.wrapperCol"
				>
					{{formData.supName}}
				</a-form-item>
				
				<a-form-item
					label="项目相关人员"
					:label-col="formItemLayout.labelCol"
					:wrapper-col="formItemLayout.wrapperCol"
				>
					 <ul style="margin-bottom: 0">
					 	<li v-for='item in formData.projectPersonnel' v-if='formData.projectPersonnel.length>0' class='fl'>{{item.name}}，</li>
					 </ul>
				</a-form-item>
				<a-form-item
					label="项目状态"
					:label-col="formItemLayout.labelCol"
					:wrapper-col="formItemLayout.wrapperCol"
				>
					{{formData.prjStatus | prjStatus}}
				</a-form-item>
				<a-form-item
					label="相关资料"
					:label-col="formItemLayout.labelCol"
					:wrapper-col="formItemLayout.wrapperCol"
				> 
					 <ul >
					 	<li v-for='item in formData.projectFiles' v-if='formData.projectFiles.length>0'>{{item.name}} <a-icon type="download" @click='downloadFile(item.code)' class='fr pt12'/></li>
					 </ul>
				</a-form-item>
				 
				<a-form-item
					:wrapper-col="buttonItemLayout.wrapperCol"
				> 
					<a-button @click='back_common()'> 返回 </a-button> 
				</a-form-item>
	    	</a-form>
	 	</a-spin>
 	</div>
</template>

<script>   
 
import { listUser_of_inner }  from  '@/api/system/index' 
import { submitProject,detailProject }  from  '@/api/project/index'

export default {
  name: 'projectDetail',
  data () { 
    this.timeout = null;
	this.currentValue = '';
    return {
    	spinning:false,
    	indicator:<a-icon type="loading-3-quarters"  spin  style="{ fontSize: '16px' }"/> ,
    	delayTime:1000,

    	dutyPersonOptions:[],//option_负责人
    	/*form  布局*/
      	formLayout:'horizontal',
      	/*form*/
	    formData:{ },
      	/*form v-model */    
      	fileData:[],  

		isEdit:false,
		currentCode:'',//prjcode 
		//loadSelected_option_list_selectedValue
		selectedBuy:'',
		selectedSupply:'', 
   		//loadSelected_option_editFinished
		firstFlag:false,
		secFlag:false,
                                                                
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this);
    
  },
  created(){ 
  		if(this.$route.query.code){
  			this.isEdit = true
  			this.currentCode = this.$route.query.code  
  		}
  		//先判断当前状态，使isEdit完全正确
  		this.pageInit()
  },
  mounted(){
  	 
  },
  methods:{
  	//初始化userlist
  	pageInit(){ 
  		let userFun = new Promise(function(resolve,reject){
  			listUser_of_inner({pageSize:100}).then((res)=>{ 
				if(res.data.flag == true){
					resolve(res.data.dataList)
				}
				else{
					reject()
				}
	  		})
  		})   
		let detailFun = new Promise((resolve,reject)=>{
  			detailProject(this.currentCode).then((res)=>{
  				if(res.data.flag == true){
  					resolve(res.data.data)
  				}
  				else{
  					reject()
  				}
  			})
		})
		// this.spinning = true 
		//Promise的all方法，等数组中的所有promise对象都完成执行
		Promise.all([userFun,detailFun]).then(([res1,res2])=>{  
			this.dutyPersonOptions = res1   
			this.formData = res2 
		})
  		
  	}, 
 
  },
	computed: {
		formItemLayout () {
			const { formLayout } = this;
			return formLayout === 'horizontal' ? {
			labelCol: {md:{span:5},lg:{ span: 7 }},  //label 标签布局
			wrapperCol: {xxl:{ span: 8 },xl:{ span : 11},lg:{ span :14 },md:{ span : 16 },xs:{ span :24}}, //需要为输入控件设置布局样式时，使用该属性，用法同 labelCol
			} : {};
		},
		buttonItemLayout () {
			const { formLayout } = this;
			return formLayout === 'horizontal' ? {
			wrapperCol: { span: 14, offset: 7 },
			} : {};
		},
		 
	},
  components: {  
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/*.ant-input{width: 200px;}*/
</style>
